// horizontal alignment
[clarus~=left][clarus~=left][clarus~=left]            { text-align: left; }
[clarus~=centre][clarus~=centre][clarus~=centre]      { text-align: center; }
[clarus~=right][clarus~=right][clarus~=right]         { text-align: right; }
[clarus~=justify][clarus~=justify][clarus~=justify]   { text-align: justify; }

// different cursors
[clarus~=hand][clarus~=hand][clarus~=hand]      { cursor: pointer; }
[clarus~=wrong][clarus~=wrong][clarus~=wrong]   { cursor: not-allowed; }

// background colours
[clarus~=bg-gray][clarus~=bg-gray][clarus~=bg-gray]         { background-color: $bg-gray; }
[clarus~=bg-blue][clarus~=bg-blue][clarus~=bg-blue]         { background-color: $bg-blue; }
[clarus~=bg-red][clarus~=bg-red][clarus~=bg-red]            { background-color: $bg-red; }
[clarus~=bg-orange][clarus~=bg-orange][clarus~=bg-orange]   { background-color: $bg-orange; }
[clarus~=bg-green][clarus~=bg-green][clarus~=bg-green]      { background-color: $bg-green; }

// foreground colours
[clarus~=fg-navy][clarus~=fg-navy][clarus~=fg-navy]         { color: $fg-navy; }
[clarus~=fg-maroon][clarus~=fg-maroon][clarus~=fg-maroon]   { color: $fg-maroon; }

// default colours
[clarus~=bg-default][clarus~=bg-default][clarus~=bg-default]  { background-color: transparent; }
[clarus~=fg-default][clarus~=fg-default][clarus~=fg-default]  { color: black; }

// fonts
[clarus~=serif][clarus~=serif][clarus~=serif]         { font-family: $serif; }
[clarus~=sans][clarus~=sans][clarus~=sans]            { font-family: $sans; }
[clarus~=display][clarus~=display][clarus~=display]   { font-family: $display; }
[clarus~=writing][clarus~=writing][clarus~=writing]   { font-family: $writing; }
[clarus~=mono][clarus~=mono][clarus~=mono]            { font-family: $mono; }
